<template>
	<view>
		<uni-row class="demo-uni-row" v-for="item,index in shopcar" :key="item.goods_id">
			<uni-col :span="2">
				<label><checkbox :checked="item.status" @click="checkItem(index)"/></label>
			</uni-col>
			<uni-col :span="16"><uni-card :isFull="true" :title="item.goods_name" :thumbnail="item.goods_small_logo"></uni-card></uni-col>
			<uni-col :span="6"><uni-number-box v-model="item.num" @change="step"></uni-number-box></uni-col>
		</uni-row>
		<view class="footer">
			<label>
				<checkbox :checked="checked" @click="checkall"/><text>全选</text>
			</label>
			<view class="">
				总价{{allPrice}}
			</view>
			<button type="default" @click="clear">选中删除</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			shopcar: uni.getStorageSync('shopcar') || [],
			checked:uni.getStorageSync('checked') ||false
		};
	},
	computed:{
		allPrice(){
			let all=0;
			this.shopcar.forEach(i=>{
				if(i.status==true)
				all+=i.goods_price*i.num
			})
			return all
		}
		
	},
	methods: {
		step() {
			this.$nextTick(function() {
				uni.setStorageSync("shopcar",this.shopcar)
				uni.setStorageSync("checked",this.checked)
			});
			
		},
		//把存本地存储变成异步操作 可以作为公共的存本地存储的方法来用 只要发生改变就调用一下这个方法
		checkItem(index){
			this.shopcar[index].status=!this.shopcar[index].status;
			this.checked=this.shopcar.every(i=>{
				return i.status==true
			})
			this.step()
			
		},
		//点击上面的每一项
		checkall(){
			this.checked=!this.checked;
			this.shopcar.forEach(i=>{
				i.status=this.checked
			})
			this.step()
		},
		//全选
		clear(){
			this.shopcar=this.shopcar.filter(i=>i.status==false)
			this.step()
		}
		//选中删除
		
		
	}
};
</script>

<style lang="scss">
	.footer{
		width: 100%;;
		position: fixed;
		bottom: 100rpx;
		display: flex;
	}
	
</style>
